<template>
  <div class="result-body">
    <div class="mocks-detail-bar">
      <ul class="bar-list" v-if="partInfo">
        <li class="list-item" v-for="(question, index) in partInfo.question_list" @click.prevent="showQuestion(index)" :class="activeIndex == index ? 'active': ''">
          <span class="item-num">Q {{(index < 10 ? '0' + (index + 1) : (index + 1))}}</span>
          <span class="item-flag" :class="(question.result == 1 ? 'correct': 'error')"></span>
        </li>
      </ul>
    </div>
    <div class="mocks-detail-container">
      <div class="d-listen">
        <div class="question-wrap">
          <ul class="item-lists" v-if="partInfo">
            <li class="item-list" v-for="(question, index) in partInfo.question_list" :class="activeIndex == index ? 'active' : ''">
              <danxuan v-if="question.question_type==1" :index="index + 1" :question="question" :show-answer="true" :disable="true"></danxuan>
              <tiankong v-if="question.question_type==4" :index="index + 1" :question="question" :show-answer="true" :disable="true"></tiankong>
              <panduan v-if="question.question_type==6" :index="index + 1" :question="question" :show-answer="true" :disable="true"></panduan>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Danxuan from '../components/danxuan/index';
  import Tiankong from '../components/tiankong/index';
  import Panduan from "../components/panduan/panduan";

  export default {
    name: "MocksCombinationDetail",
    props: {
      partInfo: Object
    },
    components: { Danxuan, Tiankong, Panduan },
    data() {
      return {
        activeIndex: 0
      }
    },
    mounted () {

    },
    methods:{
      showQuestion (index) {
        this.activeIndex = index;
      }
    }
  }

</script>

<style scoped>

</style>
